import { Component } from 'react';
import { NavBar, Toast, Checkbox, Empty, ProductCard, Stepper, SubmitBar } from 'react-vant';
import { WapHomeO, Ellipsis } from '@react-vant/icons'
import { getCartList } from '../../api/cart';
import './index.less'
class Cart extends Component {
    state = {
        cartList: []
    }
    render() {
        let { cartList } = this.state;
        return (
            <div className='pageCart'>
                <NavBar
                    title="购物车"
                    leftText={<WapHomeO fontSize={20} />}
                    rightText={<Ellipsis fontSize={20} />}
                    onClickLeft={() => Toast('返回')}
                    onClickRight={() => Toast('按钮')}
                    fixed
                />
                {
                    cartList.length !== 0 && (
                        <div>
                            <Checkbox.Group>
                                {
                                    cartList.map((item, index) => {
                                        return (
                                            <div className='goodsItem' key={index}>
                                                <ProductCard
                                                    num={item.cartNum}
                                                    price={item.price}
                                                    desc={item.suk}
                                                    title={item.storeName}
                                                    thumb={item.image}
                                                    footer={
                                                        <div style={{ margin: '10px 0' }}>
                                                            <Stepper
                                                                value={item.cartNum}
                                                                theme='round'
                                                                buttonSize='16'

                                                            />
                                                        </div>
                                                    }
                                                />
                                                <div className='checkbox'>
                                                    <Checkbox name='a'></Checkbox>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </Checkbox.Group>
                        </div>
                    )
                }
                {
                    cartList.length === 0 && (
                        <div>
                            <Empty image="search" description="暂无数据" />
                        </div>
                    )
                }
                <SubmitBar
                    price="3050"
                    buttonText="提交订单">
                    <Checkbox>全选</Checkbox>
                </SubmitBar>
            </div>
        )
    }
    async componentDidMount() {
        let res = await getCartList();
        console.log(res)
        this.setState({
            cartList: res.data.data.list
        })
    }
}
export default Cart